<template>
  <div class="info-window">
    <div class=" info" ref="infoWindow">
      <div v-if="(selectedMark.type==='newDiscovery')">
        <!-- <div>{{selectedMark.id}}</div> -->
        <new-discovery @showMore="showMore" @closeInfo="close" :show_info="show_info"></new-discovery>
        <newdis-details :show_details.sync="show_details" @dialogClose="close"></newdis-details>
      </div>
      <div v-if="(selectedMark.type==='toVerify')">
        <to-verify @showMore="showMore" @closeInfo="close" :show_info="show_info"></to-verify>
        <tover-details :show_details.sync="show_details" @dialogClose="close"></tover-details>
        <!-- <div>{{selectedMark.id}}</div> -->
      </div>
      <div v-if="(selectedMark.type==='calcConfirmed')">
        <new-discovery @showMore="showMore" @closeInfo="close" :show_info="show_info"></new-discovery>
        <newdis-details :show_details.sync="show_details" @dialogClose="close"></newdis-details>
        <!-- <div>{{selectedMark.id}}</div> -->
      </div>
      <div v-if="(selectedMark.type==='processed')">
        <new-discovery @showMore="showMore" @closeInfo="close" :show_info="show_info"></new-discovery>
        <proces-details :show_details.sync="show_details" @dialogClose="close"></proces-details>
        <!-- <div>{{selectedMark.id}}</div> -->
      </div>
      <div v-if="(selectedMark.type==='pseudoChange')">
        <new-discovery @showMore="showMore" @closeInfo="close" :show_info="show_info"></new-discovery>
        <proces-details :show_details.sync="show_details" @dialogClose="close"></proces-details>
        <!-- <div>{{selectedMark.id}}</div> -->
      </div>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import newDiscovery from './infoTemp/newDiscovery'
  import newdisDetails from './detailsTemp/newdisDetails'
  import toVerify from './infoTemp/toVerify'
  import procesDetails from './detailsTemp/procesDetails'
  import toverDetails from './detailsTemp/toverDetails'
  export default {
    data() {
      return {
        show_details: false,
        show_info: true
      }
    },
    props: {
      windowPixel: {
        type: Object,
        default: () => {}
      },
      mapWidth: {
        type: Number,
        default: 0
      },
      show: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      close() {
        this.$emit('close')
        this.show_info = true
      },
      showMore() {
        this.show_details = true
        this.show_info = false
        // console.log(this.show_details)
      },
      offSetDom() {
        const icon = 36
        const top = this.windowPixel.y - (this.$refs.infoWindow.offsetHeight) - icon
        const left = this.windowPixel.x - ((this.$refs.infoWindow.offsetWidth - icon / 2) / 2)
        this.$refs.infoWindow.style.top = `${top}px`
        this.$refs.infoWindow.style.left = `${left}px`
        const width = this.$refs.infoWindow.offsetWidth
        let x = 0
        let y = 0
        if (this.$refs.infoWindow.offsetTop < 0) y = 0 - this.$refs.infoWindow.offsetTop + 10
        if (this.$refs.infoWindow.offsetLeft < 0) x = 0 - this.$refs.infoWindow.offsetLeft + 10
        if (this.$refs.infoWindow.offsetLeft > (this.mapWidth - width)) x = (this.mapWidth - this.$refs.infoWindow.offsetLeft) - width - 10
        this.$emit('panBy', x, y)
      }
    },
    computed: {
      ...mapGetters([
        'selectedMark'
      ])
    },
    components: {
      newDiscovery,
      newdisDetails,
      toVerify,
      procesDetails,
      toverDetails
    },
    watch: {
      selectedMark(newVal, oldVal) {
        // if (this.show) {
        this.$nextTick(() => {
          this.offSetDom()
        })
        // }
      },
      windowPixel(newVal, oldVal) {
        if (this.show) {
          this.$nextTick(() => {
            const icon = 36
            const top = newVal.y - (this.$refs.infoWindow.offsetHeight) - icon
            const left = newVal.x - ((this.$refs.infoWindow.offsetWidth - icon / 2) / 2)
            this.$refs.infoWindow.style.top = `${top}px`
            this.$refs.infoWindow.style.left = `${left}px`
          })
        }
      },
      show(newVal, oldVal) {
        if (newVal) {
          // this.$nextTick(() => {
          //   // this.offSetDom()
          //   const icon = 36
          //   const top = this.windowPixel.y - (this.$refs.infoWindow.offsetHeight) - icon
          //   const left = this.windowPixel.x - ((this.$refs.infoWindow.offsetWidth - icon / 2) / 2)
          //   this.$refs.infoWindow.style.top = `${top}px`
          //   this.$refs.infoWindow.style.left = `${left}px`
          //   const width = this.$refs.infoWindow.offsetWidth
          //   let x = 0
          //   let y = 0
          //   if (this.$refs.infoWindow.offsetTop < 0) y = 0 - this.$refs.infoWindow.offsetTop + 10
          //   if (this.$refs.infoWindow.offsetLeft < 0) x = 0 - this.$refs.infoWindow.offsetLeft + 10
          //   if (this.$refs.infoWindow.offsetLeft > (this.mapWidth - width)) x = (this.mapWidth - this.$refs.infoWindow.offsetLeft) - width - 10
          //   // console.log(this.$refs.infoWindow.offsetLeft)
          //   // console.log(width)
          //   // console.log(this.mapWidth)
          //   this.$emit('panBy', x, y)
          // })
        }
      }
      //   'carMode.accelerator': {
      //     handler: function (newVal, oldVal) {
      //       // console.log(newVal)
      //       const value = 100 - newVal
      //       this.acceleratorStyle = `width:${value}%`
      //       // console.info('value changed ', newVal)
      //       // this.$emit('e1', newVal)
      //     },
      //     immediate: true
      //     // deep: true
      //   }
    }
    // show_details(newVal) {
    //   if (this.show_details === true) {
    //     this.$emit('showMore')
    //   }
    // }
  }
</script>
<style lang="less">
  .info-window {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    width: 0;
    height: 0;
    // border-radius: 8px;

    .info {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9;
      background: #eee;
      border-radius: 8px;

      .new-discovery,
      .to-verify {
        display: flex;
        // width: 472px;
        // height: 151px;
        // border-radius: 5px;
        padding: 10px;

        .content {
          // padding: 3px;
          width: 450px;
          height: auto;
          // border-radius: 5px;

          .el-button {
            border: 0px;
            padding: 3px;
            float: right;
            background: transparent;
          }

          h3 {
            width: 100%;
            height: 40px;
            line-height: 40px;
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
            border-right: none;
            text-indent: 15px;
            color: #b4b4b4;

            p {
              width: 80%;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 14px;
            }
          }

          .content-bottom {
            width: 100%;
            height: auto;
            padding: 0 15px;

            .content-more {
              width: 70px;
              height: 70px;
              color: #fff;
              font-size: 10px;
              display: block;
              position: absolute;
              top: 20px;
              right: 35px;
              border-radius: 50%;
              text-align: center;
              line-height: 70px;
              background: #007aff;
            }

            .content-detail {
              width: 100%;
              height: auto;
              margin-top: 30px;
              border-bottom: 1px solid #c9c9c9;
              line-height: 30px;

              p {
                font-size: 10px;
                color: #b4b4b4;

                ._address {
                  width: 85%;
                  line-height: 1.5;
                }
              }

              ul {
                list-style: none;
                display: flex;
                font-size: 10px;
                color: #b4b4b4;

                li {
                  height: 40px;
                  line-height: 40px;
                  width: 50%;
                }

                .detailHide {
                  li {
                    float: left;
                    // width: 50%;
                    text-align: left;
                  }
                }
              }
            }
          }
        }
      }

      .newdis-details,
      .tover-details,
      .proces-details {
        .el-dialog__header {
          padding: 0 20px;

          .el-dialog__headerbtn {
            top: 15px;
          }
        }

        .el-dialog__body {
          padding: 0;
          background: #111d41;
          color: #b4b4b4;

          .content-header {
            padding: 13px 16px;
            line-height: 21px;
          }

          .content-body {
            padding: 16px;
            font-size: 12px;
            line-height: 1.5;

            .report {
              width: 852px;
              margin: 0 auto 20px;
              border: 1px solid #afafaf;

              h1 {
                width: 100%;
                height: 50px;
                line-height: 50px;
                text-align: center;
                font-size: 16px;
              }

              .report-top {
                width: 100%;
                height: auto;
                border-top: 1px solid #afafaf;
                overflow: hidden;

                dl {
                  width: 50%;
                  float: left;
                  border-right: 1px solid #afafaf;
                  box-sizing: border-box;

                  dt {
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    border-bottom: 1px solid #afafaf;
                    font-weight: bold;
                    font-size: 14px;
                  }

                  dd {
                    width: 100%;
                    height: 45px;
                    line-height: 45px;
                    text-align: center;
                    border-bottom: 1px solid #afafaf;
                  }
                }

                dl:nth-child(2) {
                  border: none;
                }

                h3 {
                  text-align: center;
                  line-height: 30px;
                  border-bottom: 1px solid #afafaf;
                }

                p {
                  line-height: 36px;
                  text-align: center;
                  border-bottom: 1px solid #afafaf;
                }
              }

              .report-center {
                width: 100%;

                h3 {
                  height: 30px;
                  text-align: center;
                  line-height: 30px;
                  border-bottom: 1px solid #afafaf;
                }

                .map {
                  height: 370px;
                  width: 850px;
                  border-bottom: 1px solid #afafaf;
                }
              }

              .report-bottom {
                width: 100%;
                overflow: hidden;

                h3 {
                  height: 30px;
                  line-height: 30px;
                  border-bottom: 1px solid #afafaf;
                  text-indent: 10px;
                }

                p {
                  height: 75px;
                  line-height: 25px;
                  border-bottom: 1px solid #afafaf;
                }

                label {
                  width: 33.3%;
                  float: left;
                  height: 30px;
                  line-height: 30px;
                  font-weight: bold;
                  font-size: 14px;
                  text-indent: 10px;
                  border-right: 1px solid #afafaf;
                }

                label:last-child {
                  border: none;
                }
              }
            }

            h2 {
              height: 27px;
              line-height: 27px;
              font-size: 1.5em;
            }

            .form-item {
              margin-bottom: 24px;

              .item-label {
                margin-top: 10px;
                display: block;
                text-align: left;
                line-height: 1.5px;
                float: left;
                width: 25%;
              }

              .item-input {
                width: 75%;

                .el-input__inner {
                  // width: 75%;
                  height: 30px;
                  font-family: auto;
                }

                .el-select {
                  display: flex;
                }

                .input {
                  display: flex;
                  width: 439px;
                }
              }
            }

            .form-footer {
              table {
                width: 100%;
                font-size: 14px;
                line-height: 34px;
                text-align: center;

                th {
                  font-weight: bold;
                }

                td {
                  border-bottom: 1px solid rgb(204, 204, 204);
                  border-right: 1px solid rgb(204, 204, 204);
                }

                td:first-child {
                  font-weight: bold;
                }

                td:last-child {
                  border-right: none;
                  text-align: left;
                  padding-left: 20px;
                }
              }
            }
          }
        }
      }
    }
  }

  .new-discovery::before,
  .to-verify::before {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -7px;
    width: 0;
    height: 0;
    border-top: 12px solid #ddd;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    bottom: -12px;
  }

  .new-discovery::after,
  .to-verify::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -6px;
    width: 0;
    height: 0;
    border-top: 11px solid #ddd;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    bottom: -11px;
  }
</style>